<template>
  <div id="subpage">

    <el-col :span="24" class="warp-breadcrum">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><b>小程序</b></el-breadcrumb-item>
        <el-breadcrumb-item to="/mini_app/e_book">电子刊管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{path:'/mini_app/e_book_content',query:{smallLesson_name:smallLesson_title,smallLesson_id:smallLesson_id}}">电子刊详情页</el-breadcrumb-item>
        <el-breadcrumb-item>{{smallLesson_id ? '修改' : '添加'}}页面</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>

    <div class="content">
      <div class="xcx-head">
        <span class="title">{{smallLesson_id ? '修改' : '添加'}}页面</span>
      </div>
      <div class="xcx-content">
        <el-form ref="form_data" :model="form_data" :rules="rules" label-width="140px" style="width: 80%;">


          <el-form-item label="第几页：" prop="page">
            <el-input class="w400" v-model="form_data.page" placeholder="请输入所在页数"></el-input>
          </el-form-item>
          <el-form-item label="页面类型：" prop="type">
            <el-radio v-model="form_data.type" label="1">图</el-radio>
            <el-radio v-model="form_data.type" label="2">图+短文</el-radio>
            <el-radio v-model="form_data.type" label="3">图+长文</el-radio>
            <el-radio v-model="form_data.type" label="4">图+视频</el-radio>
            <el-radio v-model="form_data.type" label="5">纯文字</el-radio>
          </el-form-item>
          <el-form-item v-show="form_data.type!=5" label="人物图：" class="line_H" prop="image">
            <el-upload accept="image/*" :on-exceed="descExceed" limit="1" :on-remove='del_img' :action="upload_img_url" :file-list="form_data.image" list-type="picture-card" :on-success="img_succ" :data="postData">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>

          <el-form-item v-show="form_data.type==1||form_data.type==4" label="主文案位置：" prop="major_text_position">
            <el-radio v-model="form_data.major_text_position" label="1">右上</el-radio>
            <el-radio v-model="form_data.major_text_position" label="2">左下</el-radio>
            <el-radio v-model="form_data.major_text_position" label="3">右下</el-radio>
          </el-form-item>

          <el-form-item v-show="form_data.type==1||form_data.type==4"  label="主文案类型：" prop="major_text_type">
            <el-radio v-model="form_data.major_text_type" label="1">图</el-radio>
            <el-radio v-model="form_data.major_text_type" label="2">文字</el-radio>
          </el-form-item>

          <el-form-item v-show="(form_data.major_text_type==1&&(form_data.type==1||form_data.type==4))" label="主文案内容：" class="line_H" prop="major_text">
            <el-upload accept="image/*" :on-exceed="descExceed1" limit="1" :on-remove='del_img1' :action="upload_img_url" :file-list="form_data.major_text" list-type="picture-card" :on-success="img_succ1" :data="postData">
              <i class="el-icon-plus"></i>
              <!--<div style="font-size: 12px; color: #606266;" slot="tip">图片大小（ 230px * 230px ）像素，图片格式png、jpg，默认第一张为封面图</div>-->
            </el-upload>
          </el-form-item>



          <el-form-item v-show="form_data.type==2||(form_data.major_text_type==2&&(form_data.type==1||form_data.type==4))"  label="主文案内容：" prop="major_text1">
            <!-- 富文本 -->
            <richText  placeholder='请输入文章内容' ref="richText1" @editor_change='editor_change1' :describe='form_data.major_text1'></richText>
          </el-form-item>


          <el-form-item v-show="form_data.type==5" label="纯文字标题：" prop="txt_title">
            <!--<el-input class="w400" v-model="form_data.txt_title" placeholder="请输入页面类型"></el-input>-->
            <!-- 富文本 -->
            <richText  placeholder='请输入纯文字标题' ref="richText2" @editor_change='editor_change2' :describe='form_data.txt_title'></richText>
            <!--<p style="font-size:12px; color:#909399;">主文案类型 (1图2文字)</p>-->
          </el-form-item>

          <el-form-item v-show="form_data.type==4" label="视频地址：" prop="video_url">
            <el-input class="w400" v-model="form_data.video_url" placeholder="请输入页面类型"></el-input>
            <!--<p style="font-size:12px; color:#909399;">主文案类型 (1图2文字)</p>-->
          </el-form-item>

          <el-form-item v-show="form_data.type==4" label="视频标题：" prop="video_text">
            <el-input class="w400" v-model="form_data.video_text" placeholder="请输入页面类型"></el-input>
            <!--<p style="font-size:12px; color:#909399;">主文案类型 (1图2文字)</p>-->
          </el-form-item>

          <el-form-item v-show="form_data.type==2||form_data.type==5||form_data.type==3" label="文章内容：" prop="content">
            <!-- 富文本 -->
            <richText placeholder='请输入文章内容' ref="richText" @editor_change='editor_change' :describe='form_data.content'></richText>
          </el-form-item>

          <el-form-item label="背景图：" class="line_H" prop="bg_image">
            <el-upload accept="image/*" :on-exceed="descExceed2" limit="1" :on-remove='del_img2' :action="upload_img_url" :file-list="form_data.bg_image" list-type="picture-card" :on-success="img_succ2" :data="postData">
              <i class="el-icon-plus"></i>
              <!--<div style="font-size: 12px; color: #606266;" slot="tip">图片大小（ 230px * 230px ）像素，图片格式png、jpg，默认第一张为封面图</div>-->
            </el-upload>
          </el-form-item>


          <el-form-item class="mar_T_50">
            <el-button type="primary" @click="save">保存</el-button>
            <el-button @click="back">返回</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script src="../../../static/js/mini_app/e_book_content_detail.js"></script>

<style scoped>

</style>
